<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <div>我叫{{ name }}，今年{{age}}岁，性别{{sex}}，爱好{{hobby}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
    </div>
</body>
<script>

    // const obj = {
    //     name:"admin",
    //     age:20
    // }   


    // const target = {};

    // 参数1：要操作的对象（劫持后的对象）
    // 参数2：配置对象
    //     要配置的属性：配置对象
    // Object.defineProperties(target, {
    //     name: {
    //         get(){
    //             console.log("name被获取了")
    //             return obj.name
    //         },
    //         set(v){
    //             console.log("name被修改了")
    //             obj.name = v
    //         }
    //     },
    //     age:{
    //         get(){
    //             console.log("age被获取了")
    //             return obj.age
    //         },
    //         set(v){
    //             console.log("age被修改了")
    //             obj.age = v
    //         }
    //     }
    // })

    // target.name = "root";
    // target.age = 18;

    // console.log(target.name)
    // console.log(target.age)



    // ===========


    const vm = new Vue({
        el:".app",
        data:{
            name:"赵五",
            age:19,
            sex:"男"
        }
    })

    vm.name = "张三"




    function Vue(ops){
        const {el="", data={}} = ops;
        const element = document.querySelector(el);
        const str = element.innerHTML;
        render(element, str, data);
        const target = {};
    
        const options = {};
        for( let i in data ){
            options[i] = {
                get(){
                    return data[i];
                },
                set(v){
                    data[i] = v;
                    render(element, str, data);
                }
            }
        }
        Object.defineProperties(target, options);

        function render(el, str, obj){
            const arr = [];
            for(let i in obj){
                const reg = new RegExp("{{ *"+ i +" *}}", "g");
                arr.push(...str.match(reg));
            }
            arr.forEach(val=>{
                const reg = /[^{{ }}]+/;
                str = str.replace(val, obj[val.match(reg)[0]]);
            })
            el.innerHTML = str;
        }
        return target;
    }

    
</script>
</html>